import React, { Component } from "react";
import "./index.css";
import { Space, Row, Col, Divider } from "antd";
import {
  UserOutlined,
  LinkOutlined,
  CopyOutlined,
  SoundOutlined,
} from "@ant-design/icons";
import echarts from "echarts";
import { indexNum } from "../../api/articleList";

export default class Index extends Component {
  constructor(props) {
    super();

    this.state = {
      vipsNum: "",
      articleNum: "",
      lanmuNum: "",

      optionline: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["资讯", "图片", "说说", "管理员登录记录"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2018-02-26",
            "2018-02-27",
            "2018-02-28",
            "2018-03-01",
            "2018-03-02",
            "2018-03-03",
            "2018-03-04",
          ],
        },
        yAxis: {
          type: "value",
          data: [0, 5, 10, 15],
        },
        series: [
          {
            name: "资讯",
            type: "line",
            stack: "总量",
            data: [5, 3, 6, 8, 3, 2, 4],
          },
          {
            name: "图片",
            type: "line",
            stack: "总量",
            data: [2, 4, 6, 5, 6, 7, 8],
          },
          {
            name: "说说",
            type: "line",
            stack: "总量",
            data: [3, 5, 8, 2, 9, 7, 10],
          },
          {
            name: "管理员登录记录",
            type: "line",
            stack: "总量",
            data: [5, 6, 8, 7, 9, 10, 1],
          },
        ],
      },
      optionpie: {
        title: {
          text: "分类文章数据统计",
          subtext: "文章总数",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["PHP", "JavaScript", "MySQL", "jQuery", "CSS", "MUI"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              {
                value: 19,
                name: "PHP",
                itemStyle: {
                  color: "#F36F8A",
                },
              },
              {
                value: 5,
                name: "JavaScript",
                itemStyle: {
                  color: "#B5C334",
                },
              },
              {
                value: 6,
                name: "MySQL",
                itemStyle: {
                  color: "#FCCE10",
                },
              },
              {
                value: 10,
                name: "jQuery",
                itemStyle: {
                  color: "#E87C25",
                },
              },
              {
                value: 8,
                name: "CSS",
                itemStyle: {
                  color: "#27727B",
                },
              },
              {
                value: 2,
                name: "MUI",
                itemStyle: {
                  color: "#FE8463",
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      optionbar: {
        title: {
          text: "文章年度统计",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
          data: ["发布量"],
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "发布量",
            data: [
              {
                value: 10,
                itemStyle: {
                  color: "#C1232B",
                },
              },
              {
                value: 8,
                itemStyle: {
                  color: "#B5C334",
                },
              },
              {
                value: 12,
                itemStyle: {
                  color: "#FCCE10",
                },
              },
              {
                value: 14,
                itemStyle: {
                  color: "#E87C25",
                },
              },
              {
                value: 10,
                itemStyle: {
                  color: "#27727B",
                },
              },
              {
                value: 6,
                itemStyle: {
                  color: "#FE8463",
                },
              },
              {
                value: 8,
                itemStyle: {
                  color: "#9BCA63",
                },
              },
              {
                value: 7,
                itemStyle: {
                  color: "#FAD860",
                },
              },
              {
                value: 15,
                itemStyle: {
                  color: "#F3A43B",
                },
              },
              {
                value: 9,
                itemStyle: {
                  color: "#60C0DD",
                },
              },
              {
                value: 5,
                itemStyle: {
                  color: "#D7504B",
                },
              },
              {
                value: 6,
                itemStyle: {
                  color: "#C6E579",
                },
              },
            ],
            type: "bar",
            label: {
              formatter: "{c}\n{b}",
              show: true,
              position: "top",
            },
          },
        ],
      },
    };
  }
  componentDidMount() {
    this.newGraphLine();
    this.newGraphPie();
    this.newGraphBar();
    indexNum().then((res) => {
      console.log(res);
      this.setState({
        vipsNum: res.vipsNum,
        articleNum: res.articleNum,
        lanmuNum: res.lanmuNum,
      });
    });
  }
  newGraphLine() {
    var myChart = echarts.init(document.getElementById("echartsline"));
    myChart.setOption(this.state.optionline);
  }
  newGraphPie() {
    var myChart = echarts.init(document.getElementById("optionpie"));
    myChart.setOption(this.state.optionpie);
  }
  newGraphBar() {
    var myChart = echarts.init(document.getElementById("optionbar"));
    myChart.setOption(this.state.optionbar);
  }
  

  render() {
    return (
      <>
        <div className="indexBox">
          <Space size="middle">
            <p>
              <span>admin</span>
              欢迎使用后台管理系统！
              <span> v1.0</span>
            </p>
            <p>
              登录次数：
              <span>{JSON.parse(localStorage.getItem("token")).loginnum}</span>
            </p>
            <p>
              登陆时间：
              <span>{localStorage.getItem("loginTime")}</span>
            </p>
          </Space>
        </div>
        <Row justify="start" className="blockList">
          <Col span={3} className="block">
            <div className="ibox ibox1">
              <UserOutlined />
            </div>
            <div className="numbox">
              <b>{this.state.vipsNum}</b>
              <font>会员总数</font>
            </div>
          </Col>
          <Col span={3} className="block">
            <div className="ibox ibox2">
              <LinkOutlined />
            </div>
            <div className="numbox">
              <b>{this.state.lanmuNum}</b>
              <font>栏目总数</font>
            </div>
          </Col>
          <Col span={3} className="block">
            <div className="ibox ibox3">
              <CopyOutlined />
            </div>
            <div className="numbox">
              <b>{this.state.articleNum}</b>
              <font>文章总数</font>
            </div>
          </Col>
          <Col span={3} className="block">
            <div className="ibox ibox4">
              <SoundOutlined />
            </div>
            <div className="numbox">
              <b>40</b>
              <font>公告总数</font>
            </div>
          </Col>
        </Row>
        <Divider orientation="left">数据统计</Divider>
        {/* 数据统计 */}
        <div className="dataStatistics">
          <div className="statistics">
            <div className="statisticsTxt">一周统计</div>
            <div className="echartBox">
              <div id="echartsline"></div>
            </div>
          </div>
          <div className="statistics">
            <div className="statisticsTxt">文章类型统计</div>
            <div className="echartBox">
              <div id="optionpie"></div>
            </div>
          </div>
          <div className="statistics">
            <div className="statisticsTxt">文章年度统计</div>
            <div className="echartBox">
              <div id="optionbar"></div>
            </div>
          </div>
        </div>
      </>
    );
  }
}
